<template>
    <div>
          <div class="searchPP">
    <img @click="goBackM" style="width: 0.6rem;
height: 1rem;
padding: 0rem 0.5rem 0rem 0rem;" src="../../style/image/cargo/leftarow.jpg" alt="">
      <div class="searchP">
        <div class="search" :style="{ width: '100%' }">
          <u-search
            placeholder="请输入商户姓名或电话"
            shape="round"
            v-model="keyword"
            :show-action="false"
          ></u-search>
        </div>
        <!-- <div @click="celendarM" class="celendar">
                <img :style="{ width:'1.1rem',height:'1.1rem', margin:'0rem 0.5rem'}" src="../../style/image/stati/日历@3x.png" alt="">
                <div>2019.10.09</div>
                </div> -->
      </div>
    </div>


    <div class="showDatsC"  v-for="(item,index) in showDatasList"  :key="index" >


          <div class="" style="border-bottom: 1px solid #e8e8e8;" >
                           <div class="prolifyP" >
                            <div style="">
                                <div style=" color:rgb(0, 0, 0);font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #666666;margin-bottom: 0.1rem;" >{{item.name}}</div>
                                <div style="margin-left: 0px;font-weight: 300;font-family: PingFang SC;" >{{item.phone}}</div>
                            </div>
                            <!-- <img style="width: 0.9rem;height: 0.9rem;" src="../../style/image/stati/A30.png" alt=""> -->
                            <div class="cargoBtn" >去铺货</div>
                           </div>
                    </div>
    </div>



    <div class="footP" >
            <div  @click="addPosM" style="padding: 0.7rem;
display: flex;align-items: center;" >
                <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt="">
                <div  style="color: white;
margin-left: 0.2rem;">添加新商户</div>
            </div>

    </div>


    </div>
    </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

   public showDatasList=[
    {
        name:'某某某',
        phone:'13454345688'
    },
     {
        name:'某某某',
        phone:'13454345688'
    },
     {
        name:'某某某',
        phone:'13454345688'
    },
     {
        name:'某某某',
        phone:'13454345688'
    },
   ]

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  addPosM(){
  
      
     uni.navigateTo({
    url: './cargoPos'
    });
  }
  goBackM(){
  uni.navigateTo({
    url: './index'
    });
  }
}
</script>

<style  scoped>

.searchPP {
  background-color: white;
  padding: 0.5rem;

  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
}
.searchP {
  background-color: white;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.prolifyP {
  display: flex;
  padding: 0.8rem 1rem;
  justify-content: space-between;
  align-items: center;
}

/* 加上标签 或者加上>   */
.agentprolify {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
}

.agentprolify :first-child {
  font-size: 0.72rem;
  font-family: "PingFang SC";
  font-weight: 300;
  color: #666666;
}

.agentprolify > :nth-child(1) {
}
.agentprolify > :nth-child(2) {
  color: red;
}
.cargoBtn{
    background: #02AF74;
border-radius: 0.2rem;
padding: 0.2rem;
color: white;
}


.footP{
position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>